<!DOCTYPE html>
<html>
    <head>
        <title>HT for Web</title>
        <meta charset="UTF-8">
        <meta name='viewport' content='user-scalable=no'>
        <link rel="shortcut icon" href="custom/images/favicon.ico?v=2" />
        <style>
            html, body {
                padding: 0px;
                margin: 0px;
            }
        </style>
        <!-- ht config -->
        <script src='custom/configs/htconfig.js'></script>

        <!-- configuration for editor -->
        <script src='custom/configs/config.js'></script>

        <!-- ht core -->
        <script src='libs/ht.js'></script>

        <!-- ht plugins -->
        <script src="libs/ht-cssanimation.js"></script>
        <script src='libs/ht-contextmenu.js'></script>
        <script src='libs/ht-dialog.js'></script>
        <script src='libs/ht-edgetype.js'></script>
        <script src='libs/ht-form.js'></script>
        <script src='libs/ht-overview.js'></script>
        <script src="libs/ht-autolayout.js"></script>
        <script src="libs/ht-obj.js"></script>
        <script src="libs/ht-historymanager.js"></script>
        <script src="libs/ht-ui.js"></script>
        <script src="libs/ht-vector.js"></script>

        <!-- socket.io -->
        <script src="/socket.io/socket.io.js"></script>

        <script>
            function init() {
                var urls = hteditor_config.subConfigs || [];
                urls.push('client.js');
                ht.Default.loadJS(urls, function(){
                    urls = [
                        'locales/' + hteditor.config.locale + '.js',
                        'custom/locales/' + hteditor.config.locale + '.js'
                    ];
                    urls.push(hteditor.init);
                    if (hteditor.config.libs) {
                        urls = urls.concat(hteditor.config.libs);
                    }
                    urls.push('vs/loader.js');
                    urls.push('vs/editor/editor.main.nls.js');
                    urls.push('vs/editor/editor.main.js');
                    ht.Default.loadJS(urls, function(){
                        hteditor_config.leftSplitViewPosition = 100;
                        hteditor_config.rightSplitViewPosition = 0.5;
                        hteditor_config.mainSplitViewPosition = -100;
                        hteditor_config.explorerSplitViewPosition = 0.5;

                        editor1 = hteditor.createEditor({
                            container: [50, 100, 500, 400],
                            open: 'displays/telecom/topology.json'
                        });
                        editor2 = hteditor.createEditor({
                            container: 'editor2Div',
                            open: 'symbols/basic/ht.json'
                        });

                        editor3 = hteditor.createEditor({
                            container: document.getElementById('editor3Div'),
                            open: 'newdisplay'
                        });

                        editor4 = hteditor.createEditor({
                            container: null,
                            onEditorCreated: function(editor) {
                                document.body.appendChild(editor.mainPane.getView());
                                editor.mainPane.layout(600, 550, 500, 400);
                                editor.mainPane.validate();
                                editor.newSymbolView();
                            }
                        });
                    });
                });

                for (var i = 0; i < 5; i++) {
                    var div = ht.Default.createDiv();
                    div.style.background = 'yellow';
                    div.innerHTML = i;
                    div.style.width = '50px';
                    div.style.height = '50px';
                    div.style.left = (100 + 100 * i) + 'px';
                    div.style.top = '20px';
                    div.setAttribute('draggable', true);
                    div.addEventListener('dragstart', function(event) {
                        event.dataTransfer.setData('hightopo', 'HT-' + event.target.innerHTML);
                    }, false);
                    document.body.appendChild(div);
                }
                hteditor_config.onDisplayViewOutsideDropping = function(editor, params) {
                    var value = params.event.dataTransfer.getData('hightopo');
                    if (value != null) {
                        console.log(value);
                        params.preventDefault = true;

                        var position = params.displayView.graphView.lp(params.event);
                        var node = new ht.Node();
                        node.setName(value);
                        node.p(position);
                        params.displayView.dm.add(node);
                    }
                }

            }
        </script>
    </head>
    <body onload='init()'>
        <div id='editor2Div' style="position:absolute;left:600px;top:100px;width:500px;height:400px"></div>
        <div id='editor3Div' style="position:absolute;left:50px;top:550px;width:500px;height:400px"></div>
        <iframe src="index.html?hteditor=displays/industry/lighting.json" style="margin:50px;position:absolute;left:50px;top:1000px;width:1000px;height:500px"></iframe>
    </body>
</html>
